import React, { useEffect, useState } from 'react';
import { Input, Select, message, Radio, Button } from 'antd';
import './AddBed.css';
import axios from 'axios';


export default function AddBed() {
    const [messageApi, contextHolder] = message.useMessage()  // 弹窗提示
    const getDepartment = (value) => {  // 选中的科室
        setDepartment(value);
    };
    const getNurse = (value) => {  // 选中的护士
        setNurse(value);
    };
    const [departmentList, setDepartmentList] = useState([  // 所属科室列表
        {
            value: '急诊科',
            label: '急诊科',
        }
    ]);
    const [bedId, setBedId] = useState('');  // 床位编号
    const [department, setDepartment] = useState(null);  // 所属科室
    const [nurseList, setNurseList] = useState([]);  // 责任护士列表

    const [nurse, setNurse] = useState(null);  // 责任护士
    const [oxygen, setOxygen] = useState(null);  // 氧气罐状态
    const [heart, setHeart] = useState(null);  // 心电机状态
    const [breath, setBreath] = useState(null);  // 呼吸机状态
    const [icu, setIcu] = useState(null);  // 急救设备状态
    const [aircondition, setAircondition] = useState(null);  // 空调地暖状态
    const [tv, setTv] = useState(null);  // 电视外设状态
    const bedIdChange = (e) => {
        setBedId(e.target.value);
    };
    const oxygenChange = (e) => {
        setOxygen(e.target.value);
    };
    const heartChange = (e) => {
        setHeart(e.target.value);
    };
    const breathChange = (e) => {
        setBreath(e.target.value);
    };
    const icuChange = (e) => {
        setIcu(e.target.value);
    };
    const airconditionChange = (e) => {
        setAircondition(e.target.value);
    };
    const tvChange = (e) => {
        setTv(e.target.value);
    };
    // 获取科室列表
    const getDepartmentList = () => {
        axios.get('http://8.148.7.123:8000/department/departnames')
            .then(res => {
                setDepartmentList(res.data.data.map(item => {
                    return {
                        value: item.name,
                        label: item.name,
                    }
                }));
            })
            .catch(err => {
                console.error(err);
            });
    }
    // 获取护士列表
    const getNurseList = () => {
        axios.get('http://8.148.7.123:8000/doctor/list_nurse', {
            params: {
                page: 1,
                size: 100
            }
        }).then(res => {
            setNurseList(res.data.data.map(item => {
                return {
                    value: item.name,
                    label: item.name,
                }
            }));
        }).catch(err => {
            console.error(err);
        });
    }
    // 点击创建
    const handleCreate = () => {
        axios.get('http://8.148.7.123:8000/bedtable/add', {
            params: {
                bednumber: bedId,
                department: department,
                oxygen: oxygen,
                heart: heart,
                breath: breath,
                icu: icu,
                aircondition: aircondition,
                tv: tv,
                nurse: nurse,
            }
        }).then(res => {
            if (res.data.code === 20004) {
                messageApi.open({
                    type: 'warning',
                    content: '请填写完整信息',
                });
            }else if (res.data.code === 1) {
                messageApi.open({
                    type:'success',
                    content: res.data.msg,
                })
                // 重置表单
                setBedId('');
                setDepartment(null);
                setNurse(null);
                setOxygen(null);
                setHeart(null);
                setBreath(null);
                setIcu(null);
                setAircondition(null);
                setTv(null);
                setNurse(null)
            }else{
                messageApi.open({
                    type: 'error',
                    content: '添加失败',
                })
            }
        }).catch(err => {
            console.log(err);
        });
    };
    useEffect(() => {
        getDepartmentList();
        getNurseList();
    }, [])  // 页面加载完成后执行一次
    return <div className="addBed">
        {contextHolder}
        {/* 弹窗提示 */}
        <div>
            <label htmlFor="bed_num">床位编号</label>
            <Input id='bed_num' style={{ width: '300px' }} value={bedId} onChange={ bedIdChange }/>
        </div>
        <div>
            <label htmlFor="department">所属科室</label>
            <Select
                id='department'
                placeholder="Select"
                style={{
                    width: 150,
                }}
                onChange={getDepartment}
                value={department}
                options={departmentList}
            />
        </div>
        <div>
            <label htmlFor="oxygen">氧气罐</label>
            <Radio.Group id='oxygen' onChange={oxygenChange} value={oxygen}>
                <Radio value={1}>是</Radio>
                <Radio value={0}>否</Radio>
            </Radio.Group>
        </div>
        <div>
            <label htmlFor="heart">心电机</label>
            <Radio.Group id='heart' onChange={heartChange} value={heart}>
                <Radio value={1}>是</Radio>
                <Radio value={0}>否</Radio>
            </Radio.Group>
        </div>
        <div>
            <label htmlFor="breath">呼吸机</label>
            <Radio.Group id='breath' onChange={breathChange} value={breath}>
                <Radio value={1}>是</Radio>
                <Radio value={0}>否</Radio>
            </Radio.Group>
        </div>
        <div>
            <label htmlFor="icu">急救设备</label>
            <Radio.Group id='icu' onChange={icuChange} value={icu}>
                <Radio value={1}>是</Radio>
                <Radio value={0}>否</Radio>
            </Radio.Group>
        </div>
        <div>
            <label htmlFor="aircondition">空调地暖</label>
            <Radio.Group id='aircondition' onChange={airconditionChange} value={aircondition}>
                <Radio value={1}>是</Radio>
                <Radio value={0}>否</Radio>
            </Radio.Group>
        </div>
        <div>
            <label htmlFor="tv">电视外设</label>
            <Radio.Group id='tv' onChange={tvChange} value={tv}>
                <Radio value={1}>是</Radio>
                <Radio value={0}>否</Radio>
            </Radio.Group>
        </div>
        <div>
            <label htmlFor="nurse">责任护士</label>
            <Select
                id='nurse'
                placeholder="Select"
                style={{
                    width: 150,
                }}
                onChange={getNurse}
                value={nurse}
                options={nurseList}
            />
        </div>

        <div className="add_btn">
            <Button type="primary" onClick={handleCreate}>确认创建</Button>
        </div>
    </div >
}